<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{user}} - {{fanzhuan}} - {{user2}}
      <!-- <div>{{strHtml}}</div>
      <span v-once>这个将不会改变: {{ user }}</span>
      <button @click="fun">点击</button>
      <input type="text" v-model="user" />
      <button v-on:[eventzame]="fun" v-bind:disabled="isButtonDisabled">
        Button
      </button>
      <a :[gethref]="testurl"> hhhhhhhhhhhhhhhhhhhhh </a>
      <div :[getclass]="divclass">hhhhhhhhhhhhhhhhhhhhh</div>
      <div :[getId]="val">百度</div>
      <a :[aA]="b">百度</a>
      <form v-on:submit.prevent="onSubmit" action="">
        <input type="submit" value="提交" />
      </form> -->
    </div>
  </body>
  <script>
    // Object.freeze(obj)
    var vm = new Vue({
      el: '#app',
      data: {
        user: 99,
        strHtml: '<h1>我是H1</h1>',
        isButtonDisabled: false,
        testurl: 'http://www.baidu.com',
        getid: 'id',
        val: '666',
        gethref: 'href',
        aa: 'href',
        b: 'http://www.baidu.com',
        getclass: 'class',
        divclass: 'tests',
        eventzame: 'dblclick',
      },
      computed: {
        user1: function () {
          return this.user + 1
        },
        user2: function () {
          return this.user + 2
        },
        fanzhuan: function () {
          return this.testurl.split('').reverse().join('')
        },
      },
      methods: {
        fun() {
          this.user = 666
          console.log(this.user)
          //   location.href = 'index.html'
        },
      },
      beforeCreate: function () {
        console.log('beforeCreate')
      },
      created: function () {
        console.log('created')
      },
      beforeMount: function () {
        console.log('挂载之前')
      },
      mounted: function () {
        console.log('挂载之后')
      },
      beforeUpdate() {
        console.log('数据更之前')
        // this.user = this.user + 1
      },
      updated() {
        console.log('数据更之后')
        // this.user = this.user + 1
      },
      beforeDestory() {
        alert(7777)
      },
    })
  </script>
</html>
